<template>
  <div class="articlebox">
    <div class="artMain" @click="gotoArticle(item.art_id)">
      <div class="type1" v-if="showType === 1">
        <h4>{{ item.title }}</h4>
        <div class="imglist">
          <img :src="item.cover.images[0]" :onerror="pic" alt="" />
        </div>
      </div>
      <div class="type0" v-if="showType === 0">
        <h4>{{ item.title }}</h4>
      </div>
      <div class="type3" v-if="showType > 1">
        <h4>{{ item.title }}</h4>
        <div class="imglist">
          <img
            :src="item2"
            :onerror="pic"
            alt=""
            v-for="(item2, index2) in item.cover.images"
            :key="index2"
          />
        </div>
      </div>
      <div class="artInfo">
        <span style="color:red" v-if="item.is_top === 1">置顶</span>
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate | timefilter }}</span>
      </div>
    </div>
    <div class="cross">
      <van-icon name="cross" @click="clickCross" />
    </div>
    <van-overlay :show="showComplain" @click="closeComplain">
      <div class="complain">
        <div class="block" @click.stop v-if="Showcom">
          <van-cell-group>
            <van-cell title="不感兴趣" icon="failure" @click="setDislikes" />
            <van-cell
              title="反馈垃圾内容"
              icon="warning-o"
              is-link
              @click="complainList"
            />
            <van-cell
              title="拉黑作者"
              icon="delete-o"
              @click="sendBlacklists"
            />
          </van-cell-group>
        </div>
        <div class="block" @click.stop v-if="ShowcomplainList">
          <van-cell-group>
            <van-cell icon="arrow-left" @click="backComplain" />
            <van-cell title="标题夸张" @click="sendComplain(1)" />
            <van-cell title="低俗色情" @click="sendComplain(2)" />
            <van-cell title="错别字多" @click="sendComplain(3)" />
            <van-cell title="旧闻重复" @click="sendComplain(4)" />
            <van-cell title="广告软文" @click="sendComplain(5)" />
            <van-cell title="内容不实" @click="sendComplain(6)" />
            <van-cell title="涉嫌违法范围" @click="sendComplain(7)" />
            <van-cell title="侵权" @click="sendComplain(8)" />
            <van-cell title="其他问题" @click="sendTextComplain()" />
          </van-cell-group>
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="ShowTextRoom" @click="closeTextRoom">
      <div class="wrapper">
        <van-cell-group @click.stop>
          <van-field
            v-model="ComMessage"
            rows="2"
            autosize
            label="举报内容"
            type="textarea"
            maxlength="50"
            placeholder="请简要输入举报内容，最大不超过50字符"
            show-word-limit
          />
          <div class="sent">
            <van-tag plain type="primary" @click="sendText">提交</van-tag>
          </div>
        </van-cell-group>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {
  setReportsApi,
  setBlacklistsApi,
  setDislikesApi
} from '../../../api/homeindex'
import { Toast } from 'vant'
export default {
  props: ['item'],
  data () {
    return {
      showComplain: false,
      Showcom: false,
      ShowcomplainList: false,
      ShowTextRoom: false,
      ComMessage: '',
      pic:
        'this.src="' +
        'https://img01.yzcdn.cn/vant/empty-image-error.png' +
        '"',
      comType: [
        '其他问题',
        '标题夸张',
        '低俗色情',
        '错别字多',
        '旧闻重复',
        '广告软文',
        '内容不实',
        '涉嫌违法范围',
        '侵权'
      ]
    }
  },
  computed: {
    showType () {
      return this.item.cover.images.length
    }
  },
  methods: {
    async sendText () {
      Toast.loading({
        message: '投诉发送中...',
        forbidClick: true
      })
      const data = {
        target: this.item.art_id,
        type: 0,
        remark: this.ComMessage
      }
      await setReportsApi(data)
      // 等待动画
      Toast.success('提交成功')
      this.closeTextRoom()
    },
    closeTextRoom () {
      this.ShowTextRoom = false
      this.ShowcomplainList = false
    },
    clickCross () {
      this.showComplain = true
      this.Showcom = true
    },
    closeComplain () {
      this.showComplain = false
    },
    // 发送投诉
    async sendComplain (type) {
      Toast.loading({
        message: this.comType[type] + '投诉发送中...',
        forbidClick: true
      })
      const data = {
        target: this.item.art_id,
        type: type,
        remark: ''
      }
      await setReportsApi(data)
      // 等待动画
      Toast.success('提交成功')
      this.showComplain = false
      this.ShowcomplainList = false
    },
    // 反馈垃圾内容列表
    complainList () {
      this.ShowcomplainList = true
      this.Showcom = false
      this.ShowTextRoom = false
    },
    // 返回举报1
    backComplain () {
      this.ShowcomplainList = false
      this.Showcom = true
    },
    // 跳转文章详情
    gotoArticle (id) {
      this.$router.push('/detail/' + id)
    },
    // 拉黑请求
    async sendBlacklists () {
      const data = {
        target: this.item.aut_id
      }
      await setBlacklistsApi(data)
      // 等待动画
      Toast.success('拉黑成功')
      this.$emit('Blacklists', this.item.aut_id)
      this.showComplain = false
      this.ShowcomplainList = false
    },
    // 不喜欢文章
    async setDislikes () {
      const data = {
        target: this.item.art_id
      }
      await setDislikesApi(data)
      // 等待动画
      Toast.success('反馈成功')
      this.showComplain = false
      this.ShowcomplainList = false
    },
    sendTextComplain () {
      this.showComplain = false
      this.ShowTextRoom = true
    }
  }
}
</script>
<style lang="less" scoped>
.articlebox {
  padding: 15px 12px;
  border-bottom: 1px solid #edeff3;
  position: relative;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    .sent {
      position: absolute;
      bottom: 7px;
      right: 60px;
    }
  }
  .artMain {
    h4 {
      font-size: 18px;
      line-height: 22px;
      font-weight: 500;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      max-height: 44px;
    }
    .type1 {
      display: flex;
      justify-content: space-between;
      h4 {
        margin-right: 4px;
      }
      .imglist {
        img {
          width: 116px;
          height: 73px;
        }
      }
    }
    .type0 {
      margin-bottom: 30px;
    }
    .type3 {
      .imglist {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        img {
          width: 116px;
          height: 73px;
        }
      }
    }
    .artInfo {
      font-size: 12px;
      margin-top: -15px;
      span {
        margin-right: 12px;
      }
    }
  }
  .cross {
    position: absolute;
    bottom: 3px;
    right: 10px;
    font-size: 5px;
    color: #ccc;
  }
  .complain {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: 300px;
      background-color: #fff;
    }
  }
}
</style>
